<template>
    <template v-for="item in menus">
      <template v-if="item.isMenu===1">
        <template v-if="childrenHasMenu(item)">
          <el-sub-menu :index="item.path">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{item.title}}</span>
            </template>
            <GuiguMenu :menus="item.children"></GuiguMenu>
          </el-sub-menu>
        </template>

        <template v-if="!childrenHasMenu(item)">
          <el-menu-item :index="item.path">
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            {{item.title}}
          </el-menu-item>
        </template>
      </template>
    </template>
</template>

<script setup>

import {defineProps} from "vue";

defineProps({
  menus:{
    type:Array,
    default:[]
  }
})

const childrenHasMenu=(item)=>{
    if(item.children&&item.children.length>=0){
        const children=item.children.filter(child=>child.isMenu===1)
        return children&&children.length>0;
    }
    return false;
}

</script>

<script>
 export default {
   name:"GuiguMenu"
 }
</script>
<style scoped>

</style>